<template>
  <div class="remindInput">
    <div class="left">
      <div class="detail_main">
        <div class="detail_top">
          <h2>监控信息</h2>
        </div>
        <div class="detail_containter">
          <FormPanel :list="formList1" :cols="1" :isSubmitBtn="false" :collapse="false" @formChange="changeHandle1" />
          <FilterTable
            ref="basetable1"
            :fetchapi="fetchApi1"
            :columns="columns1"
            :params="fetchParams1"
            :datakey="'rows'"
            :onColumnsChange="columns1 => (this.columns1 = columns1)"
            :height="100"
            :isPagination="false"
          ></FilterTable>
          <div class="detail_main">
            <div class="detail_top">
              <h2>监控信息</h2>
            </div>
            <div class="detail_containter">
              <FilterTable
                ref="basetable2"
                :fetchapi="fetchApi2"
                :columns="columns2"
                :params="fetchParams2"
                :datakey="'rows'"
                :onColumnsChange="columns2 => (this.columns2 = columns2)"
                :height="150"
                :isPagination="false"
              ></FilterTable>
            </div>
          </div>
          <div class="detail_main">
            <div class="detail_top">
              <h2>服务活动</h2>
            </div>
            <div class="detail_containter">
              <FilterTable
                ref="basetable3"
                :fetchapi="fetchApi3"
                :columns="columns3"
                :params="fetchParams3"
                :datakey="'rows'"
                :height="150"
                :onColumnsChange="columns3 => (this.columns3 = columns3)"
                :isPagination="false"
              ></FilterTable>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="detail_main">
        <div class="detail_top">
          <h2>提醒信息</h2>
        </div>
        <div class="detail_containter">
          <FormPanel :list="formList2" :isSubmitBtn="false" :collapse="false" :labelWidth="120" @formChange="changeHandle2" />
          <ButtonArea :style="{ paddingLeft: '0px', float: 'right' }">
            <el-button type="primary" icon="el-icon-printer">监控信息</el-button>
            <el-button type="primary" icon="el-icon-folder">投诉历史</el-button>
            <el-button type="primary" icon="el-icon-refresh-left">维修历史</el-button>
            <el-button type="primary" icon="el-icon-refresh-left">提醒历史</el-button>
            <el-button type="primary" icon="el-icon-delete">维修建议查询</el-button>
          </ButtonArea>
          <div style="clear:both;">
            <ToggleTable v-if="type == 1"></ToggleTable>
            <ToggleText v-if="type == 2"></ToggleText>
          </div>
          <FormPanel :list="formList3" :isSubmitBtn="false" :collapse="false" :labelWidth="120" @formChange="changeHandle3" />
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9999,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right'
            }"
          >
            <el-button>预约安排</el-button>
            <el-button>保 存</el-button>
            <el-button>取 消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ToggleTable from './ToggleTable.vue';
import ToggleText from './toggleText.vue';
export default {
  components: {
    ToggleTable,
    ToggleText
  },
  props: {
    remindData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      type: 1,
      formList1: this.createdFrom1(),
      formList2: this.createdFrom2(),
      formList3: this.createdFrom3(),
      fetchApi1: () => {},
      fetchApi2: () => {},
      fetchApi3: () => {},
      fetchParams1: {},
      fetchParams2: {},
      fetchParams3: {},
      columns1: this.createdTable1(),
      columns2: this.createdTable2(),
      columns3: this.createdTable3()
    };
  },
  created() {
    this.initForm2();
  },
  methods: {
    createdFrom1() {
      return [
        {
          type: 'TEXT_AREA',
          label: '提醒内容',
          fieldName: 'DEALER_CODE',
          initialValue: ''
        }
      ];
    },
    initForm2() {
      console.log(this.remindData);
      this.formList2.forEach(x => {
        x.initialValue = this.remindData[x.fieldName];
      });
    },
    createdFrom2() {
      return [
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          initialValue: '',
          unitRender: props => {
            return <el-button icon="el-icon-search"></el-button>;
          }
        },
        {
          type: 'INPUT',
          label: '送修人',
          fieldName: 'deliverer',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          initialValue: '',
          unitRender: props => {
            return <el-button icon="el-icon-search"></el-button>;
          }
        },
        {
          type: 'INPUT',
          label: '车主电话',
          fieldName: 'phone',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '送修人电话',
          fieldName: 'delivererPhone',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'modelName',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '上次接待服务顾问',
          fieldName: 'lastServiceAdvisor',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '保险到期日期',
          fieldName: 'insuranceDate',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '保险公司',
          fieldName: 'insuranceCompany',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '本店最近购买保险日',
          fieldName: 'latestBuyInsuranceDate',
          initialValue: ''
        }
      ];
    },
    createdFrom3() {
      return [
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '提醒状态',
          fieldName: 'remindStatus',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '失败原因',
          fieldName: 'remindFailReason',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '下次提醒日期',
          fieldName: 'nextRemindDate',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '提醒方式',
          fieldName: 'remindWay',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '保险到期月',
          fieldName: 'DEALER_CODE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '保险到期日',
          fieldName: 'insuranceDate',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '意向保险公司',
          fieldName: 'intentInsurance',
          initialValue: ''
        }
      ];
    },
    createdTable1() {
      return [
        {
          title: '序号',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '提醒人员',
          dataIndex: 'reminder',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.reminder}</span>;
          }
        }
      ];
    },
    createdTable2() {
      return [
        {
          title: '序号',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工单号',
          dataIndex: 'roNo',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.roNo}</span>;
          }
        },
        {
          title: '维修类型',
          dataIndex: 'repairType',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.repairType}</span>;
          }
        },
        {
          title: '开单日期',
          dataIndex: 'roCreateDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.roCreateDate}</span>;
          }
        },
        {
          title: '工时费',
          dataIndex: 'labourAmount',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.labourAmount}</span>;
          }
        },
        {
          title: '材料费',
          dataIndex: 'repairPartAmount',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.repairPartAmount}</span>;
          }
        },
        {
          title: '维修总金额',
          dataIndex: 'repairAmountTotal',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.repairAmountTotal}</span>;
          }
        }
      ];
    },
    createdTable3() {
      return [
        {
          title: '序号',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '活动编号',
          dataIndex: 'activityCode',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.activityCode}</span>;
          }
        },
        {
          title: '活动名称',
          dataIndex: 'activityName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.activityName}</span>;
          }
        },
        {
          title: '活动类型',
          dataIndex: 'activityType',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.activityType}</span>;
          }
        },
        {
          title: '开始日期',
          dataIndex: 'startTime',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.startTime}</span>;
          }
        },
        {
          title: '结束日期',
          dataIndex: 'finishDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.finishDate}</span>;
          }
        },
        {
          title: '活动总金额',
          dataIndex: 'activityAmount',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.activityAmount}</span>;
          }
        }
      ];
    },
    changeHandle1(val) {},
    changeHandle2(val) {},
    changeHandle3(val) {}
  }
};
</script>
<style lang="less" scoped>
.remindInput {
  width: 100%;
  .left {
    width: 30%;
    float: left;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 10px;
      }
      .detail_containter {
        padding-top: 10px;
      }
    }
  }
  .right {
    width: 70%;
    float: left;
    box-sizing: border-box;
    padding: 0 10px;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 10px;
      }
      .detail_containter {
        padding-top: 10px;
      }
    }
  }
}
</style>
